<template>
    <div class="article-list-box flex-align-center-col">
        <div style="color: white;font-size: 20px;margin-bottom: 100px;text-align: left">
            关键词 : <span>{{obj.search}}</span>
            <br>
            共计 :    <span>{{obj.articleList.length}}</span> 条数据
        </div>
        <ArticleCard :list="obj.articleList"></ArticleCard>
    </div>
</template>

<script>
    import ArticleCard from "@/components/article/ArticleCard";
    import {reactive} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import {useRoute, useRouter} from "vue-router";
    import {goTop} from "@/assets/js/utils";
    import {watch} from 'vue'
    export default {
        name: "ArticleList",
        components: {ArticleCard},
        setup(){
            let route=useRoute()
            let router=useRouter()
            let obj=reactive({
                articleList:[],
                search:""
            })

            function initArticleList(){

                let listStr = route.params.articleList;
                let search = route.params.search
                if(listStr!=null){
                    obj.articleList=JSON.parse(listStr)
                    obj.search=search
                }

            }
            onMounted(async ()=>{
               await initArticleList()
                goTop()
            })

            // 此处监听路由参数变化
            watch(route,(newV,oldV)=>{
                let artList=newV.params.articleList
                // artList===undefined
                if(artList){
                    obj.articleList=JSON.parse(artList)
                    obj.search=newV.params.search
                }

            })
            return{
                obj
            }
        }

    }
</script>

<style scoped lang="less">
    .article-list-box{
        width: 100%;
        min-height: 2000px;
        background-color:var(--theme-color);
        padding-top:100px;
        span{
            display: inline-block;
            color: tomato;
            font-size: 25px;
        }
    }
</style>